<template>
  <div class='play-list-content clearfix'>
    <div class="fl play-list">
      <div class="wrap">
        <!-- 歌单详情 -->
        <div class="wrap-con">
          <playlist-detail :playList=playListData></playlist-detail>
          <playlist-songs :playList=playListData></playlist-songs>
          <!-- 歌单评论 -->
          <comment :playList=playListData :comment=commentData></comment>
        </div>
      </div>
    </div>
    <div class="fr right-list">
      <!-- 喜欢这个歌单的人 -->
      <people-like-playlist :playList=playListData
      :collector=playlistCollector ></people-like-playlist>
      <!-- 热门歌单 -->
      <popular-playlist :relatedPlaylist=relatedPlaylist></popular-playlist>
    </div>
  </div>
</template>

<script>
import utils from '../../utils/common'
import playlistDetail from './playlistDetail'
import playlistSongs from './playlistSongs'
import comment from '../comment/comment'
import peopleLikePlaylist from './peopleLikePlaylist'
import popularPlaylist from './popularPlaylist'
export default {
  name: 'playList',
  data() {
    return {
      playListId: '',
      playListData: {
        songListName: '', // 歌单名称
        createTime: '',
        subscribedCount: 0, // 收藏个数
        shareCount: 0, // 分享个数
        commentCount: 0 // 留言数
      },
      commentData: '',
      playlistCollector: '',
      relatedPlaylist: ''
    }
  },
  watch: {
    $route() {
      this.playListId = this.$route.query.id;
      this.getData()
    }
  },
  mounted() {
    this.playListId = this.$route.query.id;
    this.getData()
  },
  methods: {
    getData() {
      this.getPlayList().then(() => {
        this.getPlaylistComment()
        this.getPlaylistSubscribers()
        this.getRelatedPlaylist()
      })
    },
    async getPlayList() {
      let param = {
        id: this.playListId
      }
      let self = this
      // 获取歌单详情
      try {
        let res = await this.$api.getPlayListDetail(param)
        let { data: { playlist } } = res
        // console.log(playlist)
        self.playListData = playlist
        self.playListData.updateTime = utils.formatDate(playlist.updateTime)
        if (playlist.description) {
          self.playListData.description = playlist.description.split('\n')
        }
      } catch(error) {
        console.log(error)
      }
    },
    async getPlaylistComment() {
      // 获取歌单评论
      try {
        let param = {
          id: this.playListData.id,
          limit: 5000,
        }
        let res1 = await this.$api.getPlaylistComment(param)
          this.commentData = res1.data
        } catch(error) {
          console.log(error)
        }
    },
    async getPlaylistSubscribers() {
      // 获取歌单收藏者
      try {
        let param = {
          id: this.playListData.id,
          limit: 8
        }
        let res2 = await this.$api.getPlaylistSubscribers(param)
        // console.log('喜欢这个歌单的人:', res2)
        if (res2.data.code == 200) {
          this.playlistCollector = res2.data
        }
      } catch (err) {
        console.log(err)
      }
    },
    async getRelatedPlaylist() {
      let self = this
      // 获取相关歌单
      try {
        let param = {
          id: this.playListData.id
        }
        let res3 = await this.$api.getRelatedPlaylist(param)
        // console.log('相关歌单推荐:', res3)
        if (res3.data.code == 200) {
          self.relatedPlaylist = res3.data.playlists
        }
      } catch (err) {
        console.log(err)
      }
    }
  },
  components: {
    playlistDetail,
    playlistSongs,
    comment,
    peopleLikePlaylist,
    popularPlaylist
  }
}
</script>

<style scoped lang='less'>
  .play-list-content {
    width: 1100px;
    height: auto;
    background-color: white;
    margin: 0 auto;
    .play-list {
      margin-right: -271px;
      width: 100%;
      height: auto;
      .wrap {
        margin-right: 270px;
        height: auto;
        .wrap-con {
          padding: 30px 30px 0 30px;
          height: calc(100% - 30px);
          border-right: 1px solid #e1e1e1;
        }
      }
    }
    .right-list {
      width: 210px;
      height: 100%;
      padding: 20px 30px 0 30px;
      border-left: 1px solid #e1e1e1;
    }
  }
  
</style>